<template>
  <header class="header">
    <nav class="header-top">
      <ul class="header-top-nav">
        <li>
          <router-link to="/login?redirect=/" v-if="!store.state.user.token"
            >请先登录</router-link
          >
        </li>
        <li>
          <router-link to="/" v-if="!store.state.user.token"
            >免费注册</router-link
          >
        </li>
        <li>
          <router-link to="/member" v-if="store.state.user.token">{{
            store.state.user.account
          }}</router-link>
        </li>
        <li>
          <router-link to="/" v-if="store.state.user.token" @click="logout"
            >退出登录</router-link
          >
        </li>
        <li><router-link to="/member/order">我的订单</router-link></li>
        <li><router-link to="/">会员中心</router-link></li>
        <li><router-link to="/">帮助中心</router-link></li>
        <li><router-link to="/">关于我们</router-link></li>
        <li>
          <router-link to="/"
            ><el-icon size="18"><Iphone /></el-icon>手机版</router-link
          >
        </li>
      </ul>
    </nav>
    <nav class="header-category-wrap">
      <div class="header-category">
        <div class="header-logo">
          <router-link to="/"></router-link>
        </div>
        <ul class="header-category-nav">
          <li><router-link to="/">首页</router-link></li>
          <!-- 分类列表 -->
          <li v-for="category in categoryList" :key="category.id">
            <router-link :to="`/category/${category.id}`" class="show_sub">{{
              category.name
            }}</router-link>
            <div class="layer">
              <ul>
                <li v-for="sub in category.children" :key="sub.id">
                  <router-link :to="`/category/sub/${sub.id}`">
                    <img :src="sub.picture" :alt="sub.name" />
                    <p>{{ sub.name }}</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <!-- <li><router-link to="/category/1005002">美食</router-link></li>
          <li><router-link to="/category/1010000">服饰</router-link></li>
          <li><router-link to="/category/1011000">母婴</router-link></li>
          <li><router-link to="/category/1013001">个护</router-link></li>
          <li><router-link to="/category/1019000">严选</router-link></li>
          <li><router-link to="/category/1043000">数码</router-link></li>
          <li><router-link to="/category/109243029">运动</router-link></li>
          <li><router-link to="/category/19999999">杂项</router-link></li> -->
        </ul>
        <div class="search-wrap">
          <div class="search">
            <el-icon class="search-icon"><Search /></el-icon>
            <input type="text" placeholder="搜一搜" class="input" />
          </div>
        </div>
        <div class="shopcart">
          <router-link to="/cart" class="svgcart"
            ><el-icon color="#333"><ShoppingCart /></el-icon
            ><span>{{ cartList.length }}</span>
          </router-link>
        </div>
        <div class="showcart_wrap" v-if="cartList.length">
          <div class="tag"></div>
          <div class="showcart">
            <ul>
              <li v-for="cart in cartList" :key="cart.id">
                <router-link :to="`/product/${cart.id}`" class="goods">
                  <img :src="cart.picture" :alt="cart.name" />
                  <div class="goods_detail">
                    <div>
                      <h3>{{ cart.name }}</h3>
                      <p>{{ cart.attrsText }}</p>
                    </div>
                    <div>
                      <h3>￥{{ cart.price }}</h3>
                      <p>X{{ cart.count }}</p>
                    </div>
                  </div>
                </router-link>
                <div class="del" @click="delCart(cart.skuId)">X</div>
              </li>
            </ul>
          </div>
          <div class="showcart_footer">
            <div class="footer_left">
              <span>共 {{ cartList.length }} 件商品</span>
              <p>￥{{ allPrice }}</p>
            </div>
            <el-button class="btn" @click="router.push('/cart')" plain
              >去购物车结算</el-button
            >
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'SHeader'
}
</script>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { reqGetCategory, reqGetCartList, reqDelCart } from '@/api/header'
const router = useRouter()

// 分类列表
const categoryList = ref([
  { name: '居家' },
  { name: '美食' },
  { name: '服饰' },
  { name: '母婴' },
  { name: '个护' },
  { name: '严选' },
  { name: '数码' },
  { name: '运动' },
  { name: '杂货' }
])

// 图标购物车列表
const cartList = ref([])

// 方法1 本地获取token 是否登录
// const userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
// const token = userInfo.token
// const account = userInfo.account

// 方法2 vuex 获取token 是否登录 code在模板上
const store = useStore()

// 点击退出登录，计时器模拟退出登录（服务器的未删除，没有api接口）
const logout = async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      // 删除本地和vuex 用户信息包括token
      store.commit('user/LOGOUT')
      resolve()
    }, 300)
  })
  ElMessage.success('退出登录成功')
  router.push('/login')
}

// 获取分类数据
onMounted(async () => {
  categoryList.value = await reqGetCategory()
})

// 封装获取头部图标购物车列表
const getCartList = async () => {
  // 是否登录
  if (store.state.user.token) {
    const result = await reqGetCartList()
    cartList.value = result
  } else {
    return false
  }
}

// 获取购物车列表
onMounted(() => {
  getCartList()
})

// 计算总价
const allPrice = computed(() => {
  return cartList.value.reduce((p, c) => p + parseFloat(c.price) * c.count, 0)
})

// 点击删除
const delCart = async (skuId) => {
  const ids = []
  ids.push(skuId)
  await reqDelCart(ids)
  ElMessage.success('删除成功')
  // 获取购物车列表
  getCartList()
}
</script>

<style scoped lang="less">
.header-top,
.header-category-wrap {
  min-width: 1240px;
  background-color: #fff;
}
.header-top {
  background-color: #333;
}

.header-top-nav,
.header-category {
  margin: 0 auto;
  width: 1240px;
}
.header-category,
.header-top-nav {
  display: flex;
}
.header-category {
  position: relative;
}
.header-category-nav {
  display: flex;
  justify-content: space-between;
  padding-left: 40px;
  width: 780px;
}
.header-top-nav {
  line-height: 53px;
}
.header-top-nav li a {
  padding: 0 15px;
  height: 12px;
  border-right: 2px solid #666;
  font-size: 14px;
  color: #cdcdcd;
}
.header-top-nav li a:hover {
  color: #27ba9b;
}
.header-top-nav li:last-of-type a {
  border-right: transparent;
  display: flex;
  margin-top: 22px;
  align-items: center;
}
.header-top-nav {
  justify-content: flex-end;
}
.header-logo {
  width: 200px;
}
.header-logo a {
  display: block;
  height: 132px;
  width: 100%;
  background: url(../assets/images/logo.png) no-repeat center 18px / contain;
}
div.search-wrap,
.shopcart {
  line-height: 132px;
}
.header-category-nav li {
  display: flex;
  align-items: center;
  margin-right: 40px;
  a {
    color: #333;
  }
}
.header-category-nav > li > a {
  display: block;
  width: 32px;
  height: 32px;
}
.header-category-nav > li > a:hover {
  color: #27ba9b;
  border-bottom: 1px solid #27ba9b;
}
div.search-wrap .input {
  padding-left: 5px;
  height: 31px;
  border: none;
  outline: none;
}
div.search {
  display: flex;
  margin-top: 50px;
  align-items: center;
  line-height: 31px;
  border-bottom: 1px solid #e7e7e7;
  span {
    line-height: 18px;
    width: 18px;
    height: 18px;
  }
}
.search-icon {
  font-size: 20px;
}
.shopcart {
  position: relative;
  font-size: 32px;
  span {
    position: absolute;
    top: 48px;
    left: 26px;
    display: block;
    width: 20px;
    line-height: 15px;
    text-align: center;
    border-radius: 10px;
    background-color: #e26237;
    color: #fff;
    font-size: 16px;
  }
}

.layer {
  width: 1240px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 100px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 0 5px #ccc;
  transition: all 0.2s 0.1s;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 70px;
    align-items: center;
    li {
      width: 110px;
      text-align: center;
      height: 132px;
      line-height: 32px;
      a {
        display: flex;
        flex-direction: column;
      }
      img {
        width: 60px;
        height: 60px;
      }
      p {
        padding-top: 10px;
      }
      &:hover {
        p {
          color: #27ba9b;
        }
      }
    }
  }
}
.layer:hover {
  height: 100%;
  opacity: 1;
}
a.show_sub:hover + .layer {
  height: 100%;
  opacity: 1;
}

/* 购物车 */
.showcart_wrap {
  position: absolute;
  top: 82px;
  right: 0;
  height: 0;
  opacity: 1;
  overflow: hidden;
  transition: all 0.2s 0.1s;
  .tag {
    position: absolute;
    top: -10px;
    right: 3px;
    border: 10px solid transparent;
    border-bottom-color: red;
  }
}
.showcart_wrap:hover {
  height: 412px;
  opacity: 1;
}
.showcart {
  padding: 10px;
  padding-right: 2px;
  width: 400px;
  background-color: #fff;
  img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }
  ul {
    overflow: auto;
    height: 300px;
    padding: 10px;
    padding-right: 0;
    border: 1px solid red;
    li {
      display: flex;
      align-items: center;
    }
    .goods {
      flex: 1;
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      margin-right: 10px;
      border-bottom: 1px solid #f5f5f5;
      color: #333;
      .goods_detail {
        flex: 1;
        display: flex;
        div {
          height: 80px;
        }
        div:first-of-type {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          h3 {
            padding-top: 5px;
            text-overflow: ellipsis;
            font-weight: normal;
            font-size: 16px;
          }
          p {
            padding-bottom: 5px;
            text-overflow: ellipsis;
            color: #999;
            font-size: 14px;
          }
        }
        div:last-of-type {
          margin-right: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          h3 {
            margin-bottom: 10px;
            text-overflow: ellipsis;
            font-weight: normal;
            font-size: 16px;
            color: #cf4444;
          }
          p {
            text-align: center;
            color: #999;
          }
        }
      }
    }
    .del {
      margin-right: 5px;
      cursor: pointer;
      color: #999;
      opacity: 0;
    }
    li:hover .del {
      opacity: 1;
    }
  }
}
.showcart_footer {
  display: flex;
  padding: 10px;
  padding-left: 20px;
  background-color: #f8f8f8;
  .footer_left {
    flex: 1;
    span {
      color: #999;
      font-size: 14px;
    }
    p {
      margin-top: 5px;
      color: #cf4444;
    }
  }
  .btn {
    height: 50px;
    flex: 1;
    background-color: #e6faf6;
    border-color: #27ba9b;
    color: #27bab3;
  }
}
.shopcart:hover + .showcart_wrap {
  height: 412px;
  opacity: 1;
}
</style>

<style>
*,
body {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
</style>
